<template>
    <div class="popoverbox">
        <div class="popover-l" @click="handleLeftShow">
            <i :class="poverstyle"></i>
        </div>
        <slot name="popover_r" v-if="rightshow"></slot>
    </div>
</template>  
<script>
    export default {
        name:"popover",
        data(){
            return{
                rightshow:true,
                poverstyle:"el-icon-arrow-right"
            }
        },
        methods:{
            handleLeftShow(){
                this.rightshow = !this.rightshow;
                this.poverstyle= this.rightshow?"el-icon-arrow-right":"el-icon-arrow-left"
            }
        }
    }
</script>  
<style lang="scss" scoped>
    .popoverbox{
        position: fixed;
        top:50%;
        right: 5px;
        transform: translateY(-50%);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 999;
        .popover-l{
            padding: 10px 1px;
            background-color: #fff;
            border: 1px solid #ddd;
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
            color: #ddd;
        }
    }
</style>